import React, { PropTypes } from 'react'
import { Form,Input,Select, Button, Row, Col,Modal } from 'antd'
import SearchGroup from '../ui/search'
import styles from './ex.css'
import { DatePicker} from 'antd';

const { MonthPicker, RangePicker } = DatePicker;
const Search = Input.Search;
const Option = Select.Option;

class ExGoodsSearch extends React.Component {
	 constructor (props) {
    	super(props);
    	this.state={
				type: '全部类型',
				keywords:'',
				examine:'全部类型',
				picked:'全部类型',
				start:'',
				end:'',
				size:'default',
				dateTime:''
		}
   }
	search(){	
			this.props.onSearch({
				keywords: this.state.keywords,
				type:this.state.type == '全部类型' ? '' : this.state.type,
				examine:this.state.examine == '全部类型' ? '' : this.state.examine,
				picked:this.state.picked == '全部类型' ? '' : this.state.picked,
				start:this.state.start,
				end:this.state.end
		})
	}
	inputChange(key,e){
		const { value } = e.target;
		this.state[key]=value.replace(/\s+/g,'')
	}

	changeDate(date,datastring){ 		
		const startTime = new Date(datastring[0]).getTime() / 1000;
		const endTime = new Date(datastring[1]).getTime() / 1000;

		this.state['start'] = startTime;		 //开始时间的时间戳
		this.state['end'] = endTime;		     // 结束时间的时间戳

			this.setState({
				dateTime: date
			})


	}

	handleSelectChange(key,value){
		if(key == 'type'){
			this.setState({
				type: value
			})
		};
		if(key == 'examine'){
			this.setState({
				examine: value
			})
		};
		if(key == 'picked'){
			this.setState({
				picked: value
			})
		};
	}
	reset(){
		// document.getElementById("customer").value=""
		// this.setState({
		// 	"keywords":""
		// })
		// this.props.onClear()
		document.getElementById("customer").value="";
		this.setState({
			"keywords":"",
			 type: '全部类型',
			 examine: '全部类型',
			 picked: '全部类型',
			 start:'',
				end:'',
				dateTime: ''

		})
		this.props.onSearch({
				// keywords:'',
				// type:'',
				// examine:'',
				// picked:'',
				// start:'',
				// end:'',
		})

	}
		render(){
			const { size } = this.state;
			return (  	
		    <Row gutter={24}>
					<Row gutter={24}>
						<Col lg={3} md={6} sm={12} xs={24}>
							<span className={styles.span}>关键字筛选：</span>
							<Input id="customer" placeholder="输入姓名或电话查询" onChange={(e)=>this.inputChange('keywords',e)}/>
						</Col>
						<Col lg={3} md={6} sm={12} xs={24}>
							<span className={styles.span}>受理类型：</span>
							<Select id="selectValue" onChange={(value)=>this.handleSelectChange('type',value)} value={this.state.type} style={{width:120,marginLeft:10}}>
								<option value="">全部类型</option>
								<option value="客服换货">客服换货</option>
								<option value="前置仓换货">前置仓换货</option>
								<option value="混合换货">混合换货</option>
							</Select>	
						</Col>
						<Col lg={3} md={6} sm={12} xs={24}>
							<span className={styles.span}>审核状态：</span>
							<Select onChange={(value)=>this.handleSelectChange('examine',value)} value={this.state.examine} style={{width:120,marginLeft:10}}>
								<option value="">全部状态</option>
								<option value="通过">通过</option>
								<option value="不通过">不通过</option>
								<option value="审核中">审核中</option>
							</Select>	
						</Col>
						<Col lg={3} md={6} sm={12} xs={24}>
							<span className={styles.span}>取件状态：</span>
							<Select onChange={(value)=>this.handleSelectChange('picked',value)} value={this.state.picked} style={{width:120,marginLeft:10}}>
								<option value="">全部状态</option>
								<option value="已取件">已取件</option>
								<option value="未取件">未取件</option>
								<option value="部分取件">部分取件</option>
							</Select>	
						</Col>
						{// <Col lg={3} md={6} sm={12} xs={24} >
												// 	<span className={styles.span}>订单类型：</span>
												// 	<Select onChange={(value)=>this.handleSelectChange('status',value)} defaultValue="全部" style={{width:120,marginLeft:10}}>
												// 		<option value="">全部</option>
												// 		<option value="换货处理">换货处理</option>
												// 		<option value="正常销售">正常销售</option>
												// 	</Select>	
												// </Col>
						}	
						<Col lg={5} md={8} sm={12} xs={24}>
							<span className={styles.span}>时间检索：</span>
								<RangePicker size={size} onChange={(v,s)=>this.changeDate(v,s)} value={this.state.dateTime} />
						</Col>						
					</Row>		
					<Row gutter={24}>
						<Col lg={2} md={6} sm={12} xs={24}>
							<Button type="primary" style={{marginTop:18}} onClick={this.search.bind(this)}>搜索</Button>
						</Col>
						<Col lg={2} md={6} sm={12} xs={24}>
							<Button type="primary" style={{textAlign:'right',marginTop:18}} onClick={this.reset.bind(this)}>重置</Button>
						</Col>
					</Row>
		  </Row>
			
		  )
		}
}

ExGoodsSearch.propTypes = {
  form: PropTypes.object.isRequired,
  onSearch: PropTypes.func,
  onAdd: PropTypes.func,
  field: PropTypes.string,
  keyword: PropTypes.string
}

export default Form.create()(ExGoodsSearch)
